<template>
	

		<view class="content">
			<heardSeach @emitParmas="seach">
				<view class="tab-box">
					<view @click="changeTab(index)" class="items" v-for="(item,index) in tabs" :key="item.id"
						:class="{'active':active===index}">
						<text>{{item.name}}</text>
					</view>
					<!-- <v-tabs @change="changeTab" activeColor="rgba(0, 122, 255, 1)" v-model="active" field="name"
						:tabs="tabs" bgColor="#f2f2f2">
						
					</v-tabs> -->
				</view>

			</heardSeach>
			<view class="list-parnet">
				<c-list v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载" @load="Loads">
					<van-empty description="暂无数据" v-if="list.length===0" />
					<component @emitItem="emitItem" :is="getComponentItem" :list="list" @emitOpen="emitOpen">
					</component>
				</c-list>
			</view>

		</view>



	
	<view class="popup-box-parent" v-if="showCenter" @click="showCenter=false">
		<view class="popup-box" @click.stop="stop">
			<view class="popup-item">
				<text class="popup-item-1">学生: {{itemInfo.user.username}}</text>
				<text class="popup-item-2">{{itemInfo.month?itemInfo.month:itemInfo.week}}</text>
			</view>
			<view class="textarea-box">
				<text>审核 <text class="text-color-2">*</text></text>
				<uni-data-select v-model="parmasinfo.examine_state" :localdata="actions" @change="onSelect"
					:clear="false"></uni-data-select>
				<!-- <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
						<template #reference>
							<view class="type-item">
								<text>{{parmasinfo.examine_state===1?'审核通过':'审核拒绝'}}</text>
			
								<van-icon name="arrow-down" class="type-item-icon" />
							</view>
						</template> 
					</van-popover> -->
			</view>
			<view class="textarea-content">
				<uni-easyinput type="textarea" autoHeight v-model="parmasinfo.examine_note"
					placeholder="原因"></uni-easyinput>
			</view>
			<view class="button-text">
				<text class="button-text1" @click="close">取消</text>
				<text class="button-text2" @click="submit">确认</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getFeedbackDayList,
		examineFeedbackDay,
		getFeedbackMonthList,
		examineFeedbackMonth,
		getTeacherStudents,
	} from "@/apis/teachingFeedback.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		getTimeDate,
		getreadType
	} from "../../utils/index.js"
	import componentOne from "./component/teachingcomponent/feedbackday.vue"
	import componentTwo from "./component/teachingcomponent/feedbackmonth.vue"
	import componentThree from "./component/teachingcomponent/feedbackdayPlan.vue"
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import heardSeach from "../../components/heardSeach/index.vue"
	const tabs = ref([{
			name: '每日反馈'
		},
		{
			name: '每月反馈'
		},
		{
			name: '学习进度'
		}
	])
	const actions = [{
			value: 1,
			text: '审核通过'
		},
		{
			value: 2,
			text: '审核拒绝'
		},

	];
	const popup = ref()
	const parmasinfo = reactive({
		id: 0,
		examine_state: 1,
		examine_note: '',
	})
	const itemIndex = ref(0)
	const itemInfo = ref()
	const showPopover = ref(false);
	const isNoUpdate = ref(false)
	const active = ref(0);
	const showCenter = ref(false)
	const list = ref([])
	const error = ref(false);
	const total = ref(0)
	const loading = ref(false);
	const listLoading = ref(false);

	const getComponentItem = computed(() => {
		switch (active.value) {
			case 0:
				return componentOne;
				break;
			case 1:
				return componentTwo;
				break;
			case 2:
				return componentThree;
				break;
		}
	})
	const pramas = reactive({
		start_date: '',
		end_date: '',
		search_data: '',
		page: 1,
		size: 20,
	})
	onLoad(() => {
		let time = getTimeDate()
		pramas.start_date = `${time.year}/${time.month}/${time.day}`
		pramas.end_date = `${time.year}/${time.month}/${time.day}`
		init() 
		// showCenter.value = true;

	})
	const changeTab = (e) => {
		active.value = e
		pramas.page = 1
		list.value = []
		isNoUpdate.value = false
		init()
	}
	const init = async (type) => {
		try {
			if (listLoading.value || isNoUpdate.value) {
				return
			}
			listLoading.value = true;
			if (type) {
				pramas.page = pramas.page + 1
			}
			if (active.value === 0) {
				let {
					data
				} = await getFeedbackDayList(pramas)

				if (data && data.data.length > 0) {
					total.value = data.total

					list.value = [...list.value, ...data.data]
				} else {
					isNoUpdate.value = true
				}
			} else if (active.value === 1) {
				let {
					data
				} = await getFeedbackMonthList(pramas)

				if (data && data.data.length > 0) {
					total.value = data.total

					list.value = [...list.value, ...data.data]
				} else {
					isNoUpdate.value = true
				}
			} else {
				let {
					data
				} = await getTeacherStudents(pramas)

				if (data && data.data.length > 0) {
					total.value = data.total

					list.value = [...list.value, ...data.data]
				} else {
					isNoUpdate.value = true
				}
			}
			listLoading.value = false;
			// console.log('触底加载')

		} catch (err) {
			console.log(err)
			listLoading.value = false;
			isNoUpdate.value = false
		}



	}
	const seach = (data) => {
		pramas.start_date = data.start_date
		pramas.end_date = data.end_date
		pramas.search_data = data.value
		pramas.page = 1
		list.value = []
		isNoUpdate.value = false
		init()

	}
	const Loads = () => {
		init(1)
		loading.value = false;
		error.value = false;
	};
	const onSelect = (action) => {
		//弹框类型选择
		parmasinfo.examine_state = action.id

		console.log(action)

	}
	const emitOpen = (item, index) => {
		//点击弹框确认操作
		itemIndex.value = index
		itemInfo.value = item
		showCenter.value = true;


	}
const stop=()=>{
	
}
	const emitItem = (e) => {
		//点击列表某一项 
		uni.navigateTo({
			url: `/pages/teachingFeedback/teachingFeedbackDetail?type=${ active.value}&id=${e.id}`
		})
	}
	const submit = async () => {
		parmasinfo.id = itemInfo.value.id
		if (active.value === 0) {
			let data = await examineFeedbackDay(parmasinfo)

			if (data.code === 1) {
				uni.showToast({
					icon: 'none',
					title: '审核成功',
					duration: 2000
				});
			}
		} else if (active.value === 1) {
			let data = await examineFeedbackMonth(parmasinfo)

			if (data.code === 1) {
				uni.showToast({
					icon: 'none',
					title: '审核成功',
					duration: 2000
				});
			}
		}
		pramas.page = 1
		list.value = []
		isNoUpdate.value = false
		popup.value.close()
		init()
		showCenter.value = false
		popup.value.close()
	}
	const close = () => {
		parmasinfo.examine_note = ''
		showCenter.value = false
		popup.value.close()
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		padding: 0 30rpx;
		display: flex;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		flex: 1;
		border-color: rgba(121, 72, 234, 1);
		color: rgba(121, 72, 234, 1);
		border: 2rpx solid transparent;
	}

	.active {
		background: linear-gradient(90deg, rgba(172, 51, 193, 1) 0%, rgba(121, 72, 234, 1) 100%);
		border-color: rgba(121, 72, 234, 1);
		color: #fff;
	}

	:deep(.v-tabs__container) {
		// justify-content: center;
	}

	:deep(.van-tab--card.van-tab--active) {
		background: linear-gradient(90deg, rgba(172, 51, 193, 1) 0%, rgba(121, 72, 234, 1) 100%);
		border-color: rgba(121, 72, 234, 1);
		color: #fff;
	}

	:deep(.van-tab--card) {

		border-color: rgba(121, 72, 234, 1);
		color: rgba(121, 72, 234, 1);
	}

	:deep(.van-tabs__nav--card) {
		border-color: rgba(121, 72, 234, 1);
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
		// padding: 24rpx 40rpx;
		// padding-top: 12rpx;
	}

	.list-parnet {
		width: 100%;
		flex: 1;
		overflow: hidden;
	}

	.popup-box-parent {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 66666;
		background: rgba(0, 0, 0, .4);
	}

	.popup-box {



		display: flex;
		flex-direction: column;
		align-items: center;
		width: 620rpx;
		// height: 650rpx;
		padding: 32rpx 77rpx;
		background: rgba(235, 235, 235, 1);
	}

	.popup-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-bottom: 32rpx;
	}

	.popup-item-1 {
		font-size: 28rpx;
	}

	.popup-item-2 {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
		margin-left: 12rpx;
	}

	.textarea-box {

		display: flex;
		align-items: center;
		width: 100%;
	}

	.textarea-content {}

	.type-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 290.89rpx;
		height: 50.82rpx;
		background: #fff;
		border-radius: 12rpx;
		margin-left: 24rpx;
	}

	.textarea-content {

		width: 100%;

		margin-top: 32rpx;
		background: #fff;

		.uni-textarea-wrapper {
			width: 400rpx;
		}
	}

	.button-text {
		display: flex;
		width: 100%;
		margin-top: 60rpx;

		.button-text1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			color: rgba(0, 0, 0, 1);
			font-size: 40rpx;
		}

		.button-text2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			color: rgba(23, 101, 227, 1);
			font-size: 40rpx;
		}
	}
</style>